<template>
    <div class="account">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addAccount({},0)"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="tableReload"></a-button>
        </div>
        <div>
            <p-remote-vxe-table
                    ref="remoteTable"
                    :data-fun="dataFun"
                    @afterLoad="afterLoad"
                    @afterLoadErr="afterLoadErr"
                    :params="params">
                <template slot-scope="{tablePage, data, loading, handlePageChange, sortChangeEvent}" :params="params">
                    <vxe-grid
                            border
                            resizable
                            auto-resize
                            sync-resize
                            size="mini"
                            :height="tableHeight"
                            :loading="loading"
                            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
                            :pager-config="tablePage"
                            :columns="columns"
                            :sortConfig="{
                                remote: true,
                                trigger: 'cell',
                            }"
                            highlight-hover-row
                            highlight-current-row
                            highlight-hover-column
                            highlight-current-column
                            @sort-change="sortChangeEvent"
                            @page-change="handlePageChange"
                            :data="data">
                        <template v-slot:roleList="{row}">
                            <div v-if="row.roleList && row.roleList.length > 0">
                                <a-tag color="#108ee9" v-for="(item,index) in row.roleList" :key="index">
                                    {{item.roleName}}
                                </a-tag>
                            </div>
                        </template>
                        <template v-slot:useFlag="{row}">
                            <span v-if="row.useFlag">是</span>
                            <span v-else>否</span>
                        </template>
                        <template v-slot:action="{ row, column }">
                            <div class="clearfix text-c">
                                <a-button size="small" type="primary" class="pull-left mb-10 mr-10" @click="authRole(row)">关联角色</a-button>
                                <a-button size="small" type="primary" icon="edit" class="pull-left mb-10 mr-10" @click="addAccount(row,1)"></a-button>
                                <a-button size="small" type="primary" class="pull-left mb-10 mr-10" @click="bindUser(row)">绑定用户</a-button>
                                <a-button size="small" type="danger" icon="delete" class="pull-left" @click="delAccount(row)"></a-button>
                            </div>
                        </template>
                    </vxe-grid>
                </template>
            </p-remote-vxe-table>
        </div>
        <add-account ref="addAccount" @done="tableReload"></add-account>
        <auth-role ref="authRole" @done="tableReload"></auth-role>
        <bind-user ref="bindUser" @done="tableReload"></bind-user>
    </div>
</template>

<script>
    let defaultColumns = [
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '账号名称', minWidth: 120, align: 'center', field: 'userName' },
        { title: '关联角色', minWidth: 150, align: 'center', slots: {default: 'roleList'} },
        { title: '创建时间', minWidth: 150, align: 'center', field: 'createdTime' },
        { title: '是否禁用', minWidth: 150, align: 'center', slots: {default: 'useFlag'} },
        { title: '操作', width: 150, align: 'left', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import addAccount from './add';
    import authRole from './auhtRole';
    import bindUser from "./bindUser";
    export default {
        components: {
            addAccount,
            authRole,
            bindUser,
        },
        data () {
            return {
                dataFun: this.$api.permission.listbyadminuser,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    keywords: '',
                },
                columns: JSON.parse(JSON.stringify(defaultColumns)),
                loadingSearch: false,
            };
        },
        methods: {
            afterLoad () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            afterLoadErr () {
                this.loadingSearch = false;
                this.autoResetTableHeight();
            },
            tableReload () {
                this.$refs['remoteTable'].reload(this.params);
            },
            //绑定角色
            authRole (data) {
                this.$refs.authRole.show(data);
            },
            //绑定用户
            bindUser (data) {
                let temData = JSON.parse(JSON.stringify(data));
                this.$refs.bindUser.show(temData);
            },
            //新增编辑账号
            addAccount (data,num) {
                let title = num === 0 ? '新增账号' : '编辑账号';
                this.$refs.addAccount.show(data,title,num);
            },
            //删除账号
            delAccount (data) {
                console.log(data);
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
